<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { computed, reactive } from 'vue'

import useEventStore from '@/store/main/event/event'
import Echarts from '@/components/ref-echarts/ref-echarts.vue'
const eventStore = useEventStore()
eventStore.searchPublishEventCountAction()
eventStore.getEventAction({ limit: 1000 })
const { eventCount, eventList } = storeToRefs(eventStore)

const titleContent = computed(() => {
  return eventList.value.map((item) => {
    return `${item.title}(${item.club_name})`
  })
})
const joinedCount = computed(() => {
  return eventList.value.map((item) => {
    return Math.round((item.registered_count / item.registration_limit) * 100)
  })
})
const squareOption = reactive({
  title: {
    text: '社团活动发布个数'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: '活动个数',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: eventCount
    }
  ]
})

const option = reactive({
  title: {
    text: '活动参与度'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'value',
      axisLabel: {
        show: true,
        interval: 'auto',
        formatter: '{value} %'
      },
      show: true
    }
  ],
  yAxis: {
    type: 'category',
    data: titleContent
  },
  series: [
    {
      type: 'bar',
      itemStyle: {
        normal: {
          color: function (d: any) {
            return (
              '#' +
              Math.floor(Math.random() * (256 * 256 * 256 - 1)).toString(16)
            )
          },
          label: {
            show: false,
            position: 'top',
            formatter: '{b}\n{c}%'
          }
        }
      },
      data: joinedCount
    }
  ]
})
</script>

<template>
  <div :style="{ width: '1230px', height: '350px' }">
    <Echarts :option="squareOption" />
  </div>

  <div :style="{ width: '1230px', height: '350px', marginTop: '100px' }">
    <Echarts :option="option" />
  </div>
</template>
<style lang="less"></style>
